<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

<body>
  <div id="app">
    <el-table :data="tableData" :header-cell-style="headFirst" border style="width: 100%; margin-top: 20px">
      <el-table-column  align='center' label="ID">
        <el-table-column prop="id" align='center'>
        </el-table-column>
        <el-table-column prop="name" align='center'>
        </el-table-column>
        <el-table-column prop="amount1" align='center'>
        </el-table-column>
      </el-table-column>
      <el-table-column prop="amount2" label="数值 2（元）">
      </el-table-column>
      <el-table-column prop="amount3" label="数值 3（元）">
      </el-table-column>
    </el-table>
  </div>
</body>
<script>
  new Vue({
    name: 'tabel',
    el: '#app',
    data: {
      tableData: [{
        id: '12987122',
        name: '老王',
        amount1: ['规模'],
        amount2: '3.2',
        amount3: 10
      }, {
        id: '12987123',
        name: '王小虎',
        amount1: ['165','4587','741'],
        amount2: '4.43',
        amount3: 12
      }, {
        id: '12987124',
        name: '王小虎',
        amount1: '324',
        amount2: '1.9',
        amount3: 9
      }, {
        id: '12987125',
        name: '王小虎',
        amount1: '621',
        amount2: '2.2',
        amount3: 17
      }, {
        id: '12987126',
        name: '王小虎',
        amount1: '539',
        amount2: '4.1',
        amount3: 15
      }]
    },
    methods: {
      headFirst({row, colunm, rowIndex, columnIndex}){
        if (rowIndex === 1) {
            //这里为了是将第二列的表头隐藏，就形成了合并表头的效果
              return {display: 'none'}
            }
        // return "background:#f5f7fa"
      }
    }
  })
</script>

</html>